<template>
    <div class="yj-rent-pagination">
      <el-pagination
        background
        @size-change="handlePageSizeChange"
        @current-change="handlePageChange"
        :current-page.sync="currentPage"
        :page-sizes="pageNumberlist"
        :page-size="pageSize"
        :layout="paginationLayout"
        :total="total"
      >
      </el-pagination>
    </div>
  </template>
  
  <script>
  
  
  export default {
  
    name: "Pagination",
  
    props: {
      pageNumberlist: {
        type: Array,
        default: function () {
          return [10, 50, 100]
        }
      },
  
      paginationLayout: {
        type: String,
        default: function () {
          return "total, prev, pager, next, sizes"
        }
      },
  
      total: {
        type: Number,
        default: function () {
          return 0
        }
      },

      pageSizes: {
        type: Number,
        default: function () {
          return 10
        }
      },
    },
  
    data() {
      return {
        currentPage: 1,
        pageSize: 10
      }
    },
  
    watch: {
    },
  
    mounted() {
      this.init()
    },
  
    methods: {
      init() {
        this.currentPage = 1;
        this.pageSize = this.pageSizes;
        this.$emit('init', {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        });
      },
  
      reset() {
        this.currentPage = 1;
        this.$emit('reset', {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        });
        this.$emit('change', {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        });
      },
  
      handlePageChange(ppage) {
        this.currentPage = ppage;
        this.$emit('change', {
          currentPage: ppage,
          pageSize: this.pageSize
        });
  
        this.$emit('pageChange', ppage);
      },
  
      handlePageSizeChange(pnumber) {
        this.currentPage = 1;
        this.pageSize = pnumber;
        this.$emit('change', {
          currentPage: this.currentPage,
          pageSize: pnumber
        });
        this.$emit('sizeChange', pnumber);
      },
    }
  }
  </script>
  
  <style lang="scss">
  .yj-rent-pagination{
    text-align: right;
    padding: 10px 0px;
  }
  </style>
  